
<template>
	<div class="map">
		<baidu-map
		:center="center"
		:scroll-wheel-zoom="true"
		:zoom="14"
		:mapStyle="{styleJson:styleJson}"
		mapType="BMAP_NORMAL_MAP"
		class="baidumap"
		:style="{'height':height}"
		>
		<div v-for="(it,index) in ms" :key="index">
			<bm-marker
			:key="it.id"
			:position="it.position"
			@click="markclick(it,index)"
			@mouseover="markover(it,index)"
			:icon="it.icon? icon:icon"
			@mouseout="markout(it,index)"
			
			>
			<bm-info-window :show="it.show" :position="it.position" :title="'it.mess'">
				<p v-text="it.mess"></p>
			</bm-info-window>
			</bm-marker>
		</div>
		<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
		<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
		<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
		<!-- <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type> -->
		</baidu-map>
	</div>
</template>

<script>
export default {
  name: "bmap",
  props: ["height", "type"],
  data() {
    return {
      center: { lng: 103.030333, lat: 29.988049 },
      icon: {
        url: require("@/assets/images/location.svg"),
        size: { width: 18, height: 18 }
      },
      ms: [
        {
          id: 1,
          position: { lng: 103.00923, lat: 29.98979 },
          icon: true,
          show: true,
          mess: "设备1"
        },
        {
          id: 2,
          position: { lng: 103.030333, lat: 29.988049 },
          icon: true,
          show: false,
          mess: "设备2"
        },
        {
          id: 3,
          position: { lng: 103.030987, lat: 30.002969 },
          icon: true,
          show: false,
          mess: "设备3"
        },
        {
          id: 4,
          position: { lng: 103.023977, lat: 30.013728 },
          icon: true,
          show: false,
          mess: "设备4"
        },
        {
          id: 5,
          position: { lng: 103.051977, lat: 30.013728 },
          icon: true,
          show: false,
          mess: "设备5"
        },
        {
          id: 6,
          position: { lng: 103.058177, lat: 30.013728 },
          icon: true,
          show: false,
          mess: "设备6"
        },
        {
          id: 7,
          position: { lng: 103.053277, lat: 30.013728 },
          icon: true,
          show: false,
          mess: "设备7"
        },
        {
          id: 8,
          position: { lng: 103.040077, lat: 30.013728 },
          icon: true,
          show: false,
          mess: "设备8"
        }
      ],
      styleJson: [// 地图背景等信息
        {
          featureType: "all",
          elementType: "geometry",
          stylers: { hue: "#e6a23c", saturation: 89 }
        },
        {
          featureType: "water",
          elementType: "all",
          stylers: { color: "#ffffff" }
        }
      ]
    };
  },
  watch: {
    type(val) {
      let model = {
        1: { lng: 103.053977, lat: 30.013728 },
        2: { lat: 29.988174, lng: 102.96033 },
        3: { lat: 29.992061, lng: 103.010656 }
      };
      let msmodel = {
        1: [
          {
            id: 1,
            position: { lng: 103.00923, lat: 29.98979 },
            if: true,
            show: true,
            mess: "设备11"
          },
          {
            id: 2,
            position: { lng: 103.030333, lat: 29.988049 },
            if: true,
            show: true,
            mess: "设备12"
          },
          {
            id: 3,
            position: { lng: 103.037987, lat: 30.002969 },
            if: true,
            show: true,
            mess: "设备13"
          },
          {
            id: 4,
            position: { lng: 103.053977, lat: 30.013728 },
            if: true,
            show: true,
            mess: "设备14"
          },
          {
            id: 5,
            position: { lng: 103.053877, lat: 30.013728 },
            if: true,
            show: true,
            mess: "设备15"
          },
          {
            id: 6,
            position: { lng: 103.053477, lat: 30.013728 },
            if: true,
            show: true,
            mess: "设备16"
          },
          {
            id: 7,
            position: { lng: 103.053707, lat: 30.013728 },
            if: true,
            show: true,
            mess: "设备17"
          },
          {
            id: 8,
            position: { lng: 103.053877, lat: 30.013728 },
            if: true,
            show: true,
            mess: "设备18"
          }
        ],
        2: [
          {
            id: 21,
            position: { lat: 29.988174, lng: 102.96033 },
            if: true,
            show: true,
            mess: "设备21"
          },
          {
            id: 22,
            position: { lat: 30.004345, lng: 102.982795 },
            if: true,
            show: true,
            mess: "设备22"
          },
          {
            id: 23,
            position: { lat: 30.002125, lng: 102.971548 },
            if: true,
            show: true,
            mess: "设备23"
          },
          {
            id: 24,
            position: { lat: 30.002125, lng: 102.971548 },
            if: true,
            show: true,
            mess: "设备24"
          },
          {
            id: 25,
            position: { lat: 30.002125, lng: 102.971548 },
            if: true,
            show: true,
            mess: "设备25"
          },
          {
            id: 26,
            position: { lat: 30.002125, lng: 102.971548 },
            if: true,
            show: true,
            mess: "设备26"
          },
          {
            id: 27,
            position: { lat: 30.002125, lng: 102.971548 },
            if: true,
            show: true,
            mess: "设备27"
          },
          {
            id: 28,
            position: { lat: 30.002125, lng: 102.971548 },
            if: true,
            show: true,
            mess: "设备28"
          }
        ],
        3: [
          {
            id: 31,
            position: { lat: 29.984452, lng: 103.021274 },
            if: true,
            show: true,
            mess: "设备31"
          },
          {
            id: 32,
            position: { lat: 30.002125, lng: 102.971548 },
            if: true,
            show: true,
            mess: "设备32"
          },
          {
            id: 33,
            position: { lat: 29.992061, lng: 103.010656 },
            if: true,
            show: true,
            mess: "设备33"
          },
          {
            id: 34,
            position: { lat: 29.992061, lng: 103.010656 },
            if: true,
            show: true,
            mess: "设备34"
          },
          {
            id: 35,
            position: { lat: 29.992061, lng: 103.010656 },
            if: true,
            show: true,
            mess: "设备35"
          },
          {
            id: 36,
            position: { lat: 29.992061, lng: 103.010656 },
            if: true,
            show: true,
            mess: "设备36"
          },
          {
            id: 37,
            position: { lat: 29.992061, lng: 103.010656 },
            if: true,
            show: true,
            mess: "设备37"
          },
          {
            id: 38,
            position: { lat: 29.992061, lng: 103.010656 },
            if: true,
            show: true,
            mess: "设备38"
          }
        ]
      };
      this.center = model[val];
      this.ms = msmodel[val];
    }
  },
  methods: {
    markclick(it, index) {
      console.log(it, index);
    },
    markover(it, index) {
      console.log(it, index);
    },
    markout(it, index) {
      console.log(it, index);
    }
  }
};
</script>

<style scoped>
.baidumap {
  width: 100%;
}
</style>

